<template>
  <div class="fix-page">
      <div class="place">
          <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
          <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
          <headerNav  :isShowBack="true" :title="title"></headerNav>
          <div style="font-size: 14px" class="weui-cells weui-cells_form">
              <div class="weui-cell" style="padding: 20px">
                  <div class="weui-cell__hd">
                      <label class="weui-label">联系人</label>
                  </div>
                  <div class="weui-cell__bd">
                      <input v-model="addressForm.username" class="weui-input" type="text" placeholder="请输入联系人姓名">
                  </div>
              </div>
              <div class="weui-cell" style="padding: 20px">
                  <div class="weui-cell__hd">
                      <label class="weui-label">性别</label>
                  </div>
                  <div class="weui-cell__bd" style="text-align:left;display:flex;align-items: center">
                      <input type="radio" v-model="addressForm.sex" name="man" id="man" value="man"><span style="margin-left: 5px;">男士</span>
                      <input type="radio" v-model="addressForm.sex" style="margin-left: 15px;" name="woman" id="woman" value="woman"><span style="margin-left: 5px;">女士</span>
                  </div>
              </div>
              <div class="weui-cell" style="padding: 20px">
                  <div class="weui-cell__hd">
                      <label class="weui-label">手机号</label>
                  </div>
                  <div class="weui-cell__bd">
                      <input v-model="addressForm.phone" class="weui-input" type="text" placeholder="请输入手机号">
                  </div>
              </div>
              <div class="weui-cell" style="padding: 20px">
                  <div class="weui-cell__hd">
                      <label class="weui-label">收货地址</label>
                  </div>
                  <div class="weui-cell__bd">
                      <input v-model="addressForm.address" class="weui-input" type="text" placeholder="请输入收货地址">
                  </div>
              </div>
              <div class="weui-cell" style="padding: 20px">
                  <div class="weui-cell__hd">
                      <label class="weui-label">门牌号</label>
                  </div>
                  <div class="weui-cell__bd">
                      <input v-model="addressForm.doorNum" class="weui-input" type="text" placeholder="请输入门牌号">
                  </div>
              </div>
              <div class="weui-cell" style="padding: 20px">
                  <div class="weui-cell__hd" style="display: flex;align-items: center">
                      <input v-model="addressForm.isDefault" type="checkbox" name="default" id="default-address" value="默认地址"><span style="margin-left: 5px;">设置为默认地址</span>
                  </div>
              </div>
              <a href="javascript:;" class="weui-btn weui-btn_primary"
                 style="margin: 40px 20px;background-color:#585353;padding: 0px;color:white" @click="confirm()">确定</a>
          </div>
      </div>
  </div>
</template>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<script>
    import headerNav from 'components/HeaderNav/headerNav'
    export default {
        name: "address",
        components:{
            headerNav
        },
        data(){
            return{
                title:"编辑地址",
                type:"1",  //1为编辑   2为保存
                addressForm:{
                    username:"小慕",
                    sex:"man",
                    phone:"13898399283",
                    address:"成都市双流区双兴大道1号",
                    doorNum:"门牌号",
                    isDefault:true
                }
            }
        },
        created(){
            if(this.$route.query&&this.$route.query.type==="2"){
                this.addressForm={
                    username:"",
                        sex:"man",
                        phone:"",
                        address:"",
                        doorNum:"",
                        isDefault:false
                }
                this.title="添加地址"
                this.type="2"
            }
        },
        methods:{
             back(){
                this.$router.back()
            },
            confirm(){
                console.log(this.type);
                this.$toast({
                    message: this.type==="2"?'添加成功':"编辑成功",
                });
                 this.$router.back()
            }
        }
    }
</script>

<style scoped>
    .fix-page{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        z-index: 777;
    }
    .fix-page .place{
        overflow: auto;
        height: 100%;
        background: #fff;
    }
</style>
